<template>
 <div>
    <el-card>
        
        <div class="header" >
            <span>销售类别占比</span>
              <el-radio-group v-model="radio" size="mini">
                <el-radio-button label="全部渠道"></el-radio-button>
                <el-radio-button label="线上"></el-radio-button>
                <el-radio-button label="门店"></el-radio-button>
              </el-radio-group>
        </div>

        <div class="body" ref="body"></div>
    </el-card>
 </div>
</template>

<script>
import * as echarts from "echarts"
export default {
    //name: '',
    data(){
        return {
            radio:"全部渠道"
         }
    },
    mounted(){
        let pie=echarts.init(this.$refs.body);
        pie.setOption({
            title:{
              text:"搜索引擎",
              subtext:"1048",
              top:"center",
              left:"center"
                },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label:{
                    show:true,
                    position:"outsize"
                },
                labelLine: {
                  show:true,
                },
                data: [
                  { value: 1048, name: '搜索引擎' },
                  { value: 735, name: '直接访问' },
                  { value: 580, name: '邮件营销' },
                  { value: 484, name: '联盟广告' },
                  { value: 300, name: '视频广告' }
                ]
              }
            ]
        })
        pie.on("mouseover",(params)=>{
            const {name,value}=params.data;
            pie.setOption({
                title:{
                    text:name,
                    subtext:value
                }
            })
        })

    }
}
</script>

<style scoped>
.header{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dfdddd;
    padding: 10px 12px;
    height: 35px;
    align-items: center;

}
.body{
    height: 300px;
    width: 100%;
}
</style>
